<template>
	<view>
		<view class="popup" :class="specClass" @touchmove.stop.prevent="discard" >
			<!-- 遮罩层 -->
			<view class="mask" @tap="close"></view>
			<view class="layer" @tap.stop="discard">
				<slot name="content"></slot>
				<view class="btn" v-if="showConfirm">
					<view class="button" @tap="beSure">{{confirmText}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				specClass:'none'
			};
		},
		props:{
			padding:[String,Number],
			showConfirm:{
				type:[Boolean,Number],
				default:true
			},
			confirmText:{
				type:String,
				default:"确定"
			}
		},
		created() {
			
		},
		computed:{
			Padding(){
				return this.padding+'px'
			}
		},
		methods:{
			close(){
				this.specClass = "hide";
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
				uni.showTabBar()
				this.$emit('Close')
			},
			beSure(){
				this.$emit('beSure')
			},
			discard(){
				
			},
			show(){
				this.specClass='show';
				uni.hideTabBar()
			}
		},
	}
</script>

<style lang="scss">
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: 0;
			width: 100%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			transform: translateY(100%);
			.btn {
				width: 100%;
				height: 88upx;
				background-color:$maincolor;
				.button {
					width: 100%;
					border-radius:0 ;
					font-size: 30upx;
					height:88upx;
					line-height: 88upx;
					margin-top:0 ;
				}
			}
		}
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(100%);
		}
		100% {
			transform: translateY(0);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(100%);
		}
	}
</style>
